<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<%@ include file="validausuario.jsp"%>
<%@ page import="are.web.*" %>
<%@ page import="java.util.*" %>
<%
	String perfil = (String)session.getAttribute("perfil");
	if (!perfil.equals("admin")) {
		response.sendRedirect("accesodenegado.jsp");
		return;
	}
	db conexion = new db();
	ManejadorDispositivos MD = new ManejadorDispositivos(conexion);
	ArrayList<Dispositivo> lista = MD.list();
	
	Gps gps;
	ArrayList<Coordenadas> ruta = new ArrayList<Coordenadas>();
	if (request.getParameter("dispositivo") != null) {
		gps = new Gps(conexion);
		String device = (String)request.getParameter("dispositivo");
		ruta = gps.RutaHoy(device);
	}
%>
<html>
<head>
<title>Ver Ruta</title>
<LINK REL="stylesheet" TYPE="text/css" HREF="main.css">
<script src="js/jquery.js"></script>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer_compiled.js"></script>
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
  #map_canvas { width: 700px; height: 400px; margin-top: 10px }
  #busqueda {width: 700px; margin: 10px; float: left }
</style>
<script type="text/javascript">
var map;
var geocoder;
function initialize() {
	geocoder = new google.maps.Geocoder();
	var latlng = new google.maps.LatLng(6.708254,-72.861328);
    var myOptions = {
      zoom: 5,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);

    <% if (ruta.size() > 0)  {   %>
    
    var markers = [];
	var info = [];
	var infowindow = new google.maps.InfoWindow({
        content: ''
    });
	var puntos = [];
	var i=1;
    <%	for (Coordenadas c : ruta) {  %>
    
    
    
	var posicion = new google.maps.LatLng(<%= c.getLatitud() %>,<%= c.getLongitud() %>);
   	puntos.push(posicion);
   	var marker = new google.maps.Marker({ //opciones
        position: posicion,
        map:map
        
    });
   	var contenido ="<B>Informacion Posición</b><br/>Fecha Posicionamiento: <b><%= c.getFecha() %></b><br/>Coordenadas: <b><%= c.getLatitud() %>,<%= c.getLongitud() %></b>" ;
    //var contenido = "";
   	markers.push(marker);
   	info.push(contenido);
	if (i==1) {
		map.setCenter(posicion);
		map.setZoom(13);
		
	}
	i++;
    
    <%  }    %>
    var flightPath = new google.maps.Polyline({
        path: puntos,
        strokeColor: "#0000dd",
        strokeOpacity: 0.3,
        strokeWeight: 6
      });

      flightPath.setMap(map);   
      for (var x = 0, j = info.length; x < j; x++) {
	        var contenido = info[x];
	        var marker = markers[x];
	        (function(marker, contenido){                       
	            google.maps.event.addListener(marker, 'click', function() {
	                infowindow.setContent(contenido);
	                infowindow.open(map, marker);
	            });
	        })(marker,contenido);
	    }
    	
    <% } %>
}


</script>
</head>
<body onload="initialize()">
<%@ include file="header.jsp" %>
<div id="busqueda">
<h2>Ruta</h2>
<div id="info"></div>
<form action="" name="form1">
	<table>
		<tr>
			<th>Seleccion Smartphone</th>
		</tr>
		<tr>
			<td>IMEI: 
			<select name="dispositivo">
				<% for (Dispositivo d : lista) { %>
					<option value="<%= d.getImei() %>"><%= d.getImei() %> (<%= d.getNombre() %>)</option>
				<% } %>
			
			</select>
			<input type="submit" name="cmd_buscar" value="Ver Ruta" >
			</td>
		</tr>
	</table>

</form>
<div id="map_canvas"></div>
</div>


</body>
</html>
<%
	conexion.Close();
%>
